<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle" :backLinkName="backLinkName"></HomeTop>
    <div class="page_box">
      <div class="page_theme">
        <div class="theme_head">
          <img class="theme_img" :src="this.recordlist.image_path" alt="" />
          <div class="theme_title">{{ this.recordlist.title }}</div>
        </div>
        <div class="theme_center">
          <img
            class="time_icon"
            src="../../assets/image/time_icon01.png"
            alt=""
          />
          <div class="time">{{ this.recordlist.start_date }}</div>
        </div>
        <div class="theme_address">
          <img
            class="address_icon"
            src="../../assets/image/address_icon01.png"
            alt=""
          />
          <div class="address">{{ this.recordlist.address }}</div>
        </div>
      </div>
      <div class="page_msg">
        <div class="msgBox">
          <img
            @click="openDialog()"
            class="to_icon"
            src="../../assets/image/to_icon03.png"
            alt=""
          />
          <div class="msg_head">报名信息</div>
          <div class="msg">队伍名称：{{ this.recordlist.team_name }}</div>
          <div class="msg">队伍人数：{{ this.recordlist.amount }}</div>
          <div class="msg">领队：{{ this.recordlist.leader_name }}</div>
          <div class="msg">教练：{{ this.recordlist.coach_name }}</div>
          <div class="msg">队员名单：{{ this.recordlist.player_name }}</div>
        </div>
        <van-dialog
          width="90%"
          class="memberListDialog"
          v-model="diolagShow"
          title="队员名单"
          :showConfirmButton="false"
        >
          <img
            @click="closeDiolag()"
            class="closeIcon"
            src="../../assets/image/close_icon01.png"
            alt=""
          />
          <div class="diolag_content">
            <div class="listBox" v-for="(item, index) in players" :key="index">
              <div>
                <p>姓名</p>
                {{ item.name }}
              </div>
              <div>
                <p>证件类型</p>
                {{ indentity[item.identity_type] }}
              </div>
              <div>
                <p>证件号码</p>
                {{ item.identity_number }}
              </div>
              <div>
                <p>性别</p>
                {{ item.sex }}
              </div>
              <div>
                <p>年龄(岁)</p>
                {{ item.age }}
              </div>
            </div>
          </div>
        </van-dialog>
        <div class="msg_price">
          <div class="msg_unit" v-for="(item, index) in goodsList" :key="index">
            {{ item.name }}：¥{{ item.money }}*{{ item.amount }}
          </div>
          <div class="msg_total">
            订单总额：<span>¥{{ this.recordlist.total_money }}</span>
          </div>
        </div>
      </div>
      <div class="page_serve">
        <div class="serve">报名时间：{{ this.recordlist.created_at }}</div>
      </div>
    </div>
  </div>
</template>

<style src="../../assets/css/game/applySuccessDetails.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { MessageBox, Indicator, Toast } from "mint-ui";
// import { Router } from "express";
//   import { Checklist } from "mint-ui";
import { Stepper, Checkbox, Dialog } from "vant";
import "vant/lib/stepper/style";
// import "vant/lib/Checkbox/style";
// import "vant/lib/CheckboxGroup/style";

export default {
  name: "gameCenter",
  components: {
    HomeTop,
    [Stepper.name]: Stepper,
    [Checkbox.name]: Checkbox,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      diolagShow: false, //队员详情弹窗显示状态
      backLinkName: "gameCenter",
      topTitle: "报名详情", // 顶部组件参数设置
      recordlist: {}, //活动详情（时间/地址等数据）
      teamList: {}, //队伍的报名信息
      goodsList: [], //增值服务列表
      orderId: "", //订单ID
      players: {}, //队员名单
      indentity: {
        1: "身份证",
        2: "护照 ",
        3: "港、澳、台胞证件",
        4: "其它",
      }, //证件号枚举
    };
  },
  created() {
    this.orderId = this.$route.query.orderId;
  },
  mounted() {
    this.getTeamList();
  },
  computed: {},
  methods: {
    //关闭弹窗
    closeDiolag() {
      this.diolagShow = false;
    },
    //打开弹窗
    openDialog() {
      this.diolagShow = true;
    },
    //获取订单详情数据
    getTeamList() {
      let url = "/mobile/orderDetail";
      let data = {
        order_id: this.orderId,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            this.recordlist = res.enroll_detail;
            this.goodsList = res.goods;
            this.players = res.player;
            Indicator.close();
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
  },
};
</script>
